<template>
    <div class="box">
        <header class="header">
            <van-search show-action placeholder="请输入搜索关键词" @click-input="$router.push('/search')">
                <template #left>
                    <van-icon name="list-switch" size="22" @click="$router.push('/kind')" />
                </template>
                <template #action>
                    <van-icon name="user-o" size="22" />
                </template>
            </van-search>
        </header>
        <div class="content">
            <van-swipe :autoplay="3000" lazy-render>
                <van-swipe-item v-for="image in images" :key="image">
                    <img :src="image" style="width:100%;height:200px" />
                </van-swipe-item>
            </van-swipe>
            <van-grid>
                <van-grid-item
                    icon="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png"
                    text="京东超市" />
                <van-grid-item
                    icon="https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png"
                    text="京东电器" />
                <van-grid-item icon="photo-o" text="文字" />
                <van-grid-item icon="photo-o" text="文字" />
            </van-grid>
            <pro-list></pro-list>
        </div>
    </div>
</template>
<!-- <script>
export default {
    setup() {
        const images = [
            'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
            'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
        ];
        return { images };
    },
};
</script> -->

<script setup>
import ProList from './components/ProList.vue'
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
]
</script>